<template>
    <div class="container">
        <div>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="5" :lg="5">
                    <div class="grid-content bg-purple">
                        <div class="left-box">
                            <div class="left-title">组织资源</div>
                            <div>
                                <el-tree
                                        :data="tagsList"
                                        :props="props"
                                        :load="loadNode"
                                        lazy
                                        check-strictly
                                        highlight-current
                                        show-checkbox
                                        node-key="id"
                                        ref="tree"
                                        @check-change="treeChange"
                                        @node-expand="handleNodeClick"
                                        @node-click="handleNodeClick">
                                </el-tree>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="19" :lg="19">
                    <div class="grid-content bg-purple">
                        <div class="right-box">
                            <div class="left-title">设备列表</div>
                            <div>
                                <div class="list-div">
                                    <template>
                                        <span class="label-span">设备种类：</span>
                                        <el-select v-model="deviceType" placeholder="请选择" @change="selectDeviceType">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.typeId"
                                                    :label="item.typeName"
                                                    :value="item.typeId">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <template>
                                        <span class="label-span" style="margin-left: 30px;">账号选择：</span>
                                        <el-select v-model="countSelectData" multiple placeholder="请选择">
                                            <el-option
                                                    v-for="item in countListData" :key="item.id" :label="item.account" :value="parseInt(item.id)">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <div style="float: right;margin-right: 50px;">
                                        <el-button type="primary" @click="saveAllData">保存</el-button>
                                    </div>
                                </div>
                                <div class="list-div" style="padding: 0 10px;">
                                    <template>
                                        <el-table stripe :data="tableData" border style="width: 100%">
                                            <!--<el-table-column type="selection" width="55" align="center"></el-table-column>-->
                                            <el-table-column prop="deviceLocation" label="设备位置"></el-table-column>
                                            <el-table-column prop="deviceCode" width="80px" label="设备编号"></el-table-column>
                                            <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                                            <el-table-column prop="functions" width="410px" label="控制权限">
                                                <template slot-scope="scope">
                                                    <el-checkbox v-if="scope.row.functions.length>1" label="全选" v-model="scope.row.isFunctionAll" @change="checked=>handleCheckAllChange(scope.row,scope.$index,checked)">全选</el-checkbox>
                                                    <el-checkbox-group v-model="scope.row.ckecked" style="display:inline-block;">
                                                        <el-checkbox v-for="(item,index) in scope.row.functions" :label="item.functionId" :key="item.functionId" @change="checked=>handleCheckOneChange(scope.row,scope.$index,checked,index)">{{item.functionName}}</el-checkbox>
                                                    </el-checkbox-group>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="functions" label="是否可见">
                                                <template slot-scope="scope">
                                                    <el-radio-group v-model="scope.row.isRead" @change="handleRadioChange">
                                                        <el-radio label="1">是</el-radio>
                                                        <el-radio label="0">否</el-radio>
                                                    </el-radio-group>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div class="pagination">
                                            <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size"></el-pagination>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {regionalRoot,getSubOrgList,getDeviceTypeList,getDeviceMonitorList,countManger} from  '../../../api/index';
    export default {
        name: "",
        data () {
            return {
                options: [],
                deviceType: '',
                tableData: [],
                tagsList:[],
                demoData:'',
                clickedId:'',
                lazyInitData:[],
                lazyNode:null,
                lazyResolve:null,
                clickNode:null,
                clikData:null,
                props: {
                    label: 'orgName',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
                cur_page:1,
                page_size:15,
                page_total:1,
                curr_id:"",
                checked:false,
                typeId:'',
                countListData:[],
                countSelectData:[]
            }
        },
        created(){
            this.getData();
            this. getDeviceTypeOne();
            this.getCountList();
        },
        beforeDestroy(){
        },
        watch:{
        },
        methods :{
            loadNode(node, resolve) {
                this.lazyNode = node;
                this.lazyResolve = resolve;
                if (node.level === 0) {
                    return resolve(this.tagsList);
                }
                // if (node.level > 1) return resolve([]);

                setTimeout(() => {
                    console.log(this.clickedId)
                    getSubOrgList({
                        pid:this.clickedId
                    }).then((res)=>{
                        console.log(res)
                        this.lazyInitData = res.datas;

                        resolve(this.lazyInitData);
                    })
                }, 500);
            },
            //获取数据
            getData(){
                regionalRoot({

                }).then((res) =>{
                    // console.log(res)
                    var dataArr = new Array();
                    dataArr[0] = res.expandData.root;
                    dataArr[0]['children'] = res.expandData.childrens;
                    this.tagsList = dataArr;

                    this.clickedId = this.tagsList[0].id;
                    // console.log(dataArr)
                })
            },
            //获取树的子节点
            getSubOrgList(){
                console.log(this.clickedId)
                getSubOrgList({
                    pid:this.clickedId
                }).then((res)=>{
                    console.log(res)
                    this.lazyInitData = res.datas;
                })
            },
            //获取设备列表
            getDeviceMonitorList(oId){
                getDeviceMonitorList({
                    pageNum:this.cur_page,
                    pageSize:this.page_size,
                    orgId:oId,
                    typeId:this.typeId,
                }).then((res)=>{
                    console.log(res)
                    var demoData = res.data.list;
                    for(var i=0;i<demoData.length;i++){
                        demoData[i]['ckecked'] = [];
                        demoData[i]['isRead'] = '1';
                        demoData[i]['isFunctionAll']=true;
                        for(var n=0;n<demoData[i]['functions'].length;n++){
                            demoData[i]['ckecked'].push(demoData[i]['functions'][n].functionId)
                        }
                    }
                    this.tableData = demoData;
                    this.page_total = res.data.total;
                })
            },
            // 获取账号列表
            getCountList() {
                countManger({
                    pageNum:1,
                    pageSize:10000
                }).then((res) => {
                    // console.log(res)
                    this.countListData = res.list;
                    // console.log(JSON.stringify(this.tableData))
                })
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getDeviceMonitorList(this.curr_id);
            },
            //树的节点点击事件
            handleNodeClick(data,node) {
                this.clikData = data;
                this.clickNode = node;

                this.$refs.tree.setCheckedNodes([data]);

                if(data.pid === 0){
                    this.clickedId = data.id;
                    this.demoData = data;
                    this.demoData['pname'] = data.orgName;
                    return ;
                }
                this.clickedId = data.id;
                this.demoData = data;
                this.demoData['pname'] = node.parent.data.orgName;
            },
            //获取设备类型下拉数据
            getDeviceTypeOne(){
                getDeviceTypeList({
                }).then((res) =>{
                    console.log(res)
                    this.options = res.datas;
                })
            },
            //树复选框点击
            treeChange(data,node,val){
                console.log(data)
                console.log(node)
                console.log(val)
                if(node){
                    this.$refs.tree.setCheckedNodes([data]);
                    this.curr_id = data.id;
                    this.cur_page = 1;
                    this.getDeviceMonitorList(data.id)
                }else{
                    this.tableData = [];
                    this.page_total = 1;
                    if(this.curr_id==data.id){
                        this.curr_id = "";
                    }
                }
            },
            //点击设备类型列表
            selectDeviceType(val){
                console.log(val)
                this.typeId = val;
                this.cur_page = 1;
                this.tableData = [];
                this.getDeviceMonitorList(this.curr_id);
            },
            //控制按钮全选切换
            handleCheckAllChange(val,scopIndex,vv) {
                // console.log(val)
                // console.log(vv)
                var newCkecked = [];
                for(var i=0;i<val.functions.length;i++){
                    newCkecked.push(val.functions[i]['functionId'])
                }
                val.ckecked = vv?newCkecked:[]
                this.$set(this.tableData, scopIndex, val)
            },
            //控制按钮选择切换
            handleCheckOneChange(val,scopIndex,vv,subi){
                // console.log(val)
                // console.log(scopIndex)
                // console.log(vv)
                // console.log(subi)
                val.ckecked.length == val.functions.length ? val.isFunctionAll = true : val.isFunctionAll = false;
                this.$set(this.tableData, scopIndex, val)
            },
            //是否可见单选切换
            handleRadioChange(val){
            },
            //保存数据
            saveAllData(){
                console.log(this.countSelectData)
                console.log(this.tableData)
                console.log(this.deviceType)
            }
        },
    }
</script>

<style scoped>
    .left-box,.right-box{
        border: 1px solid #409EFF;
        min-height: 800px;
    }
    .right-box{
        min-height: 500px;
    }
    .left-title{
        height: 40px;
        line-height: 40px;
        background-color: #409EFF;
        color: #fff;
        padding: 0 10px;
    }
    .label-span{
        font-size: 14px;
        margin-right: 50px;
        margin-left: 10px;
    }
    .list-div{
        margin-top: 15px;
    }
    .button-style{
        padding: 2px 5px;
        margin-left: 0;
        background-color: #852b99;
        color: #fff;
        font-size: 12px;
    }
    .list-div .el-checkbox,.list-div .el-radio{
        margin-right: 10px;
    }
</style>
